import './rebound.css';
import { defineComponent, onBeforeMount, onBeforeUnmount, ref, unref } from 'vue';
import { reboundProps } from './props';

export default defineComponent({
	name: 'ReboundCountTo',
	props: reboundProps,
	setup(props) {
		const ulRef = ref();
		const timer = ref(null);

		onBeforeMount(() => {
			const ua = navigator.userAgent.toLowerCase();
			const testUA = regexp => regexp.test(ua);
			const isSafari = testUA(/safari/g) && !testUA(/chrome/g);

			// Safari浏览器的兼容代码
			isSafari &&
				(timer.value = setTimeout(() => {
					ulRef.value.setAttribute(
						'style',
						`
        animation: none;
        transform: translateY(calc(var(--i) * -9.09%))
      `,
					);
				}, props.delay * 1000));
		});

		onBeforeUnmount(() => {
			clearTimeout(unref(timer));
		});

		return () => (
			<>
				<div class='scroll-num' style={{ '--i': props.i, '--delay': props.delay }}>
					<ul ref='ulRef' style={{ fontSize: '32px' }}>
						<li>0</li>
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
						<li>7</li>
						<li>8</li>
						<li>9</li>
						<li>0</li>
					</ul>

					<svg width='0' height='0'>
						<filter id='blur'>
							<feGaussianBlur in='SourceGraphic' stdDeviation={`0 ${props.blur}`} />
						</filter>
					</svg>
				</div>
			</>
		);
	},
});
